<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";


const naviMenus = ref([]);

const getNaviMenuByUser = async () => {
  try {
    const response = await axios.get('/user/getNaviMenuByUser');
    naviMenus.value = response.data;
  } catch (err) {
    ElMessage.error(err.message || '获取菜单失败');
  }
};

onMounted(() => {
  getNaviMenuByUser();
});


</script>

<template>

  <el-menu
      active-text-color="#fff"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      default-active="2"
      text-color="#fff"
      router
  >

      <el-menu-item index="/">
        <el-icon><House /></el-icon>
        <span>首页</span>
      </el-menu-item>

      <el-sub-menu v-for="(pmenu, pindex) in naviMenus" :key="pmenu.id" :index="pindex.toString()">
        <template #title>
          <span>{{ pmenu.pname }}</span>
        </template>
        <el-menu-item v-for="(cmenu, cindex) in pmenu.children" :key="cmenu.id" :index="cmenu.url">
          {{ cmenu.pname }}
        </el-menu-item>
      </el-sub-menu>
    </el-menu>

</template>

<style scoped>
.el-menu {
  border-right: none; /* 移除右边框 */
}
</style>

